<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<?php 
	$width = 100; 
	$height = 80;; 
	$pixel1 = 1; 
	$pixel2 = 3;
?>
<centertest>Notice that the top image is perfectly square, and the bottom is half height. The line in the second pic isn't correct either, using some odd height.</centertest><br>
<centertest><canvas id="canvas" width="<?php echo $width * $pixel1; ?>" height="<?php echo $height * $pixel1;?>"></canvas></centertest><br>
<centertest><canvas id="canvas1" width="<?php echo $width * $pixel1; ?>" height="<?php echo $height * $pixel1;?>"></canvas></centertest><br>
<centertest><canvas id="canvas2" width="<?php echo $width * $pixel2; ?>" height="<?php echo $height * $pixel2;?>"></canvas></centertest><br>
<centertest><div id="error"></div></centertest>
<script language="javascript" type="text/javascript">

<?php require("visuals.php"); ?>

width = <?php echo $width; ?>;
height = <?php echo $height; ?>;
pixel = 1;
pixel1 = <?php echo $pixel1; ?>;
pixel2 = <?php echo $pixel2; ?>;


function buffer_line(buffer, x0, y0, x1, y1, color, pitch) {
	var dy = y1 - y0;
	var dx = x1 - x0;
	var stepx, stepy;

	if (dy < 0) { dy = -dy;  stepy = -pitch } else { stepy = pitch; }
	if (dx < 0) { dx = -dx;  stepx = -1; } else { stepx = 1; }
	dy = dy << 1;
	dx = dx << 1;

	y0 = y0 * pitch
	y1 = y1 * pitch
	buffer[x0+y0] = color
	if (dx > dy) {
		var fraction = dy - (dx >> 1)
		while (x0 != x1) {
			if (fraction >= 0) {
				y0 = y0 + stepy
				fraction = fraction - dx
			}
			x0 = x0 + stepx
			fraction = fraction + dy
			buffer[x0+y0] = color
		}
	} else {
		var fraction = dx - (dy >> 1)
		while (y0 != y1) {
			if (fraction >= 0) {
				x0 = x0 + stepx
				fraction = fraction - dy
			}
			y0 = y0 + stepy
			fraction = fraction + dx
			buffer[x0+y0] = color
		}
	}
}

function Color2RGB(color) {
	var a = (color & 0xff000000) >> 24;
	var r = (color & 0xff0000) >> 16;
	var g = (color & 0xff00) >> 8
	var b = (color & 0xff);
	return [r, g, b, a]
}

function draw_rect(data, n, sizex, sizey, color, pitch) {
	var c = Color2RGB(color);
	for( var y = 0; y < sizey; y++) {
		var nn = n * 4;
		for( var x = 0; x < sizex; x++) {
			data[nn++] = c[0];
			data[nn++] = c[1];
			data[nn++] = c[2];
			data[nn++] = 0xff;
		}
		n = n + pitch * sizex;
	} 
}
var c_canvas1 = document.getElementById("canvas1");
var c_canvas2 = document.getElementById("canvas2");
var context1 = c_canvas1.getContext("2d");
var context2 = c_canvas2.getContext("2d");
var imageData1 = context1.getImageData(0, 0, context1.canvas.width, context1.canvas.height);
var imageData2 = context2.getImageData(0, 0, context2.canvas.width, context2.canvas.height);
var buffer1 = new Array();
var buffer2 = new Array();

function buffer_blit(buffer, context, pixel, width, height) {
	var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
	width *= pixel;
	height *= pixel;
	var n = width * height * pixel;
	while((n-=pixel)>=0) draw_rect(imageData.data, n, pixel, pixel, buffer[n], width);
	
	context.putImageData(imageData, 0, 0);	
}

buffer_line(buffer1, 0, 0, width * pixel1, height * pixel1, 0xff0000, width * pixel1);
buffer_blit(buffer1, context1, pixel1, width, height);
buffer_line(buffer2, 0, 0, width * pixel2, height * pixel2, 0xff0000, width * pixel2);
buffer_blit(buffer2, context2, pixel2, width, height);

</script>
</body>
</html>

